<template>
	<el-dialog v-model="visible" :title="dataForm.titleval" :close-on-click-modal="false" draggable style="width: 100%;height: 1200px;">
		<el-button type="primary" class="btnbutton" style="margin-bottom: 20px;" @click="handlePrintJs">打印</el-button>
		<el-card id="printTest">
			<el-form ref="patientFormRef" :model="patientForm">
				<div class="divtext">患者信息</div>
				<div class="divhr"></div>
				<div class="divline">
					<el-form-item prop="username" class="divlineleft" label="姓名：">
						<span class="spantext">{{ patientForm.userName }}</span>
					</el-form-item>
					<el-form-item prop="usersex" class="divlineleft" label="性别：">
						<span class="spantext">{{ patientForm.userSex }}</span>
					</el-form-item>
					<el-form-item prop="userbirthday" class="divlineleft" label="出生日期：">
						<span class="spantext">{{ patientForm.userBirthday }}</span>
					</el-form-item>
					<el-form-item prop="userage" class="divlineleft" label="年龄：">
						<span class="spantext">{{ patientForm.userAge }}</span>
					</el-form-item>
				</div>
				<div class="divline">
					<el-form-item prop="usercard" class="divlineleft" label="身份证号：">
						<span class="spantext">{{ patientForm.userCard }}</span>
					</el-form-item>
					<el-form-item prop="socialnum" class="divlineleft" label="社保卡号：">
						<span class="spantext">{{ patientForm.socialNum }}</span>
					</el-form-item>
					<el-form-item prop="patienttype" class="divlineleft" label="患者类型：">
						<span class="spantext">{{ patientForm.patientType }}</span>
					</el-form-item>
					<el-form-item prop="visitnum" class="divlineleft" label="就诊卡号：">
						<span class="spantext">{{ patientForm.visitNum }}</span>
					</el-form-item>
				</div>
				<div class="divline">
					<el-form-item prop="usertel" class="divlineleft" label="联系电话：">
						<span class="spantext">{{ patientForm.userTel }}</span>
					</el-form-item>
					<el-form-item prop="useraddr" class="divlinecol" label="详细地址：">
						<span class="spantext">{{ patientForm.userAddr }}</span>
					</el-form-item>
				</div>
			</el-form>
			<div class="divtexttb">药品信息</div>
			<div class="divhr"></div>
			<div>
				<table class="tb" style="width:100%;margin-top: 50px;"> 
					<tbody>
						<tr>
							<td style="text-align:center;">序号</td>
							<td style="text-align:center;">药品名称</td>
							<td style="text-align:center;">药品规格</td>
							<td style="text-align:center;">数量</td>
							<td style="text-align:center;">销售价格</td>
						</tr>
						<tr v-for="(printItem,index) in state.queryForm.drugList" :key="index" >
							<td style="text-align:center;">{{index+1}}</td>
							<td style="text-align:center;">{{printItem.goodName}}</td>
							<td style="text-align:center;">{{printItem.goodSpec}}</td>
							<td style="text-align:center;">{{printItem.goodCount}}</td>
							<td style="text-align:center;">{{printItem.salePrice}}</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="divtexttb">项目检查信息</div>
			<div class="divhr"></div>
			<div>
				<table class="tb" style="width:100%;margin-top: 50px;"> 
					<tbody>
						<tr>
							<td style="text-align:center;">序号</td>
							<td style="text-align:center;">项目编码</td>
							<td style="text-align:center;">项目名称</td>
							<td style="text-align:center;">项目价格</td>
						</tr>
						<tr v-for="(printItem,index) in state.queryForm.projectList" :key="index" >
							<td style="text-align:center;">{{index+1}}</td>
							<td style="text-align:center;">{{printItem.projectCode}}</td>
							<td style="text-align:center;">{{printItem.projectName}}</td>
							<td style="text-align:center;">{{printItem.projectPrice}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</el-card>
	</el-dialog>
</template>

<script setup lang="ts" name="SysPostIndex">
import { useCrud } from '@/hooks'
import { reactive, ref,getCurrentInstance  } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import {usePatientDrugListApi} from '@/api/sys/patientdrug'
import {usePatientProjectListApi} from '@/api/sys/patientproject'
import printJs from 'print-js'
const visible = ref(false);
let proxy = getCurrentInstance();
const state: IHooksOptions = reactive({
	queryForm: {
		drugList:[],
		projectList:[]
	}
})
const patientForm = reactive({
	id:"",
	userName:'',//姓名
	userSex:'',//性别
	userBirthday:'',//出生日期
	userAge:'',//年龄
	userCard:'',//身份证号
	socialNum:'',//社保卡号
	patientType:'',//患者类型
	visitNum:'',//就诊卡号
	userTel:'',//联系电话
	userAddr:'',//详细地址
	orgId:'',//组织id,
	registerId:'',
	doctorId:'',
	caseId:'',
})

const dataForm = reactive({
	titleval: '住院记录'
})
const handlePrintJs = () => {
	printJs({
		printable: 'printTest',
		type: 'html',
		css: ['//unpkg.com/element-plus/dist/index.css'],
		scanStyles: false
	})
}
const getPatientDrug = (currentId:any) => {
	let orgCd:any=localStorage.getItem('org');
	var param={orgId:orgCd,patientId:currentId,page:1,limit:1}
	usePatientDrugListApi(param).then((response) => {
		let array:any=response.data;
		state.queryForm.drugList=array;
	})
}
const getPatientProject = (currentId:any) => {
	let orgCd:any=localStorage.getItem('org');
	var param={orgId:orgCd,patientId:currentId,page:1,limit:1}
	usePatientProjectListApi(param).then((response) => {
		let array:any=response.data;
		console.log(response);
		state.queryForm.projectList=array;
	})
}
const init = (row:any) => {
	patientForm.userName=row.userName;
	patientForm.userSex=row.userSex;
	patientForm.userBirthday=row.userBirthday;
	patientForm.userAge=row.userAge;
	patientForm.userCard=row.userCard;
	patientForm.socialNum=row.socialNum;
	patientForm.patientType=row.patientType;
	patientForm.visitNum=row.visitNum;
	patientForm.userTel=row.userTel;
	patientForm.userAddr=row.userAddr;
	patientForm.orgId=row.orgId;
	patientForm.doctorId=row.doctorId;
	getPatientDrug(row.uid);
	getPatientProject(row.uid);
	visible.value = true
}
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)

defineExpose({
	init
})
</script>

<style lang="scss" scoped>
.divline {
	width: 96%;
	height: 30px;
	float: left;
	margin-top: 20px;
}
.divline-btn{

	width: 96%;
	height: 30px;
	float: left;
	margin-top: 50px;
	text-align: center;
}
.divline-button{
	width: 96%;
	height: 30px;
	margin: 0px auto;
}
.divlinespac{
	
	width: 96%;
	height: 30px;
	float: left;
}
.divlineleft{
	width: 23%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divlinecol{
	width: 71%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divlinecolt{
	
	width: 71%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divtext{
	width: 100%;
	height: 30px;
	float: left;
	padding-left: 10px;
	font-weight: bold;
}
.divtexttb{
	
	width: 100%;
	height: 30px;
	float: left;
	padding-left: 10px;
	font-weight: bold;
	margin-top: 50px;
}
.divhr{
	width: 95%;
	height: 0.5px;
	background-color: #409Eff;
	float: left;
}
.divline-button-left {
	width: 100px;
	height: 30px;
	margin-left: 40%;
	float: left;
	:deep(.el-button--primary) {
		margin-top: 10px;
		width: 100px;
		height: 30px;
		font-size: 13px;
	}
}
.divline-button-right {
	width: 100px;
	height: 30px;
	float: left;
	margin-left: 20px;
	:deep(.el-button--primary) {
		margin-top: 10px;
		background-color: red;
		width: 100px;
		height: 30px;
		font-size: 13px;
		border: 0px;
	}
}
.spantext{
	width: 100%;
	height: 30px;
	float: left;
}
.tb {
		border-collapse:collapse;
	}
    .tb td{
      height: 25px;
    }
	.tb td, .tb th {
		border:1px solid #aaa;
	}
</style>